<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Mac官网注册页</title>
		<link rel="stylesheet" type="text/css" href="css/03-reg.css"/>
		<link rel="stylesheet" type="text/css" href="css/公共代码.css"/>
		<link rel="stylesheet" type="text/css" href="图标图标/iconfont.css"/>
	</head>
	<body>
		<!--一,首页列表板块 -->
		<header>
			<div id="box">
				<!-- 左 -->
				<div class="logo"><img src="img/logo.ico" ></div>
				<!-- 中 -->
				<ul class="listlef">
					<li><a href="">人气口红</a></li>
					<li><a href="">热卖底妆</a></li>
					<li><a href="">LISA同款</a></li>
					<li><a href="">全新柔雾唇釉</a></li>
					<li class="newPro">	<a href="">新品推荐</a>
						<div>
							<ul>
								<li><a href="">幻彩无暇粉底液</a></li>
								<li><a href="">全新魅可挚爱柔缎唇膏</a></li>
								<li><a href="">全新麻薯腮红</a></li>
								<li><a href="">定制遮瑕修容</a></li>
								<li><a href="">尤雾弹唇膏</a></li>
								<li><a href="">定制无暇柔光散粉</a></li>
							</ul>
						</div>
					</li>
					<li class="allPro"><a href="">全部产品</a>
						<div>
							<ul>
								<li><a href="">人气推荐</a></li>
								<li><a href="">彩妆</a></li>
								<li><a href="">妆前</a></li>
								<li><a href="">护肤</a></li>
								<li><a href="">扇子和工具</a></li>
							</ul>
						</div>
					</li>
					<li><a href="">会员中心</a></li>
					<li><a href="">门店专柜</a></li>
					<li><a href="">唇妆视频</a></li>
				</ul>
				<!-- 右 -->
				<div class="listrig">
					<ul>
						<a href=""><li class="iconfont icon-fangdajing"></li></a>
						<a href=""><li class="iconfont icon-youxiang"></li></a>
						<!-- <a href="03reg.html"><li class="login">注册/登录</li></a> -->
						<li><span class="reg"><a href="03reg.html">注册</a></span>/<span class="login"><a href="04login.html">登录</a></span></li>
					</ul>
				</div>
				<a href="05shopcar.html"><span class="shopcar iconfont icon-anquanshezhi"></span></a>
			</div>
		</header>
		<section>
			<div id="regBox">
				<div id="regBoxright">
					<a href=""><img src="img/signin_banner_pc.webp"></a>
				</div>
				<div id="regBoxleft">
					<p class="regBoxleftSpan">新用户注册<br>USER&nbsp;&nbsp;REGISTER</p>
					<div>
						用户名<input id="nam" type="text" placeholder="用户名:2-10个中文字符" ><span id="userMsg"></span><br>
						密&nbsp;&nbsp;&nbsp;&nbsp;码<input id="password" type="password" placeholder="密码:由6-18位字符组成"><br>
						邮&nbsp;&nbsp;&nbsp;&nbsp;箱<input id="email" type="email" placeholder="邮箱格式:1743357207@qq.com"><br>
						手机号<input id="tel"  type="text" placeholder="手机号:1开头的任意11位数字"><br>
						验证码<input type="text" placeholder="请输验证码" class="code" id="code"><br><span class="codespan"></span>
						<a href="#" class="renovate">亲，我看不清~</a>
						<button id="btn">注册</button><span id="msg"></span>
					</div>
				</div>
			</div>
		</section>
		<footer>
			<div id="footbox">
				<ul>
					<li class="firstli">门店地址</li>
					<li><a href="">查找门店</a></li>
					<li><a href="">魅可定制美妆</a></li>
					<li class="firstli">会员</li>
					<li><a href="">会员中心</a></li>
				</ul>
				<ul>
					<li class="firstli">客户服务</li>
					<li><a href="">联系我们</a></li>
					<li>官方商城服务热线:</li>
					<li><a href="">400-602-9566</a></li>
					<li>专柜客户关怀热线:</li>
					<li><a href="">400-821-1308</a></li>
					<li><a href="">常见问题</a></li>
					<li><a href="">订单情况</a></li>
				</ul>
				<ul>
					<li class="firstli">关于我们</li>
					<li><a href="">品牌故事</a></li>
					<li><a href="">艾滋病基金会</a></li>
					<li><a href="">M·A·C魅可官网购物五大理由</a></li>
					<li><a href="">M·A·C魅可专业会员</a></li>
					<li class="firstli">公司地址</li>
					<li><a href="">上海市静安区延安中路1228号<br>静安嘉里中心三座11楼</a></li>
				</ul>
				<ul>
					<li class="firstli">账户</li>
					<li><a href="">账户</a></li>
					<li><a href="">订单状态</a></li>
					<li><a href="">我的收藏</a></li>
				</ul>
				<ul>
					<li class="firstli">链接</li>
						<li>
							<a href="">
								<span class="iconfont icon-25"></span>
								<span class="iconfont icon-dingwei1"></span>
								<span class="iconfont icon-xinlang"></span>
							</a>
						</li>
					<li><img src="img/ia_600000032.webp"></li>
				</ul>
			</div>
		</footer>
	</body>
	<script src="js/machine.js"></script>
	<script src="js/ajaxTools.js"></script>
	<script>
		// 一,随机四位验证码
			//1.将随机出来的四位数显示在span里
		var codespan = $(".codespan");
		// console.log(codespan)
		function code(){
			var arr = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f","g","h","i",
			"j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y",
				"z","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O",
				"P","Q","R","S","T","U","V","W","X","Y","Z"]
			var result = 0;
			for(var i = 0; i <3;i++){
				result += arr[parseInt(Math.random()*arr.length)]
			}
			return result;
		}
		codespan.innerHTML = code();
			//2.点击看不清可以更新span里的验证码
		var renovate = $(".renovate");
		renovate.onclick = function(){
			codespan.innerHTML = code();
		}
		let nam=$("#nam")
		let password=$("#password")
		let email=$("#email")
		let tel=$("#tel")
		
		let userMsg=$("#userMsg")
		let msg=$("#msg")
		
		// 在验证盒子点击事件里完成以下操作：
		regBoxleft.onclick = function(event){
			
			var _this = event.target;
			//1. 名字:2-10个中文字符正则
			if(_this.id == "nam"){
				_this.onkeyup= function(){
					var nameReg = /^[\u4e00-\u9fa5]{2,10}$/ ;
					if(nameReg.test(_this.value)){
						_this.className="pass"
					}else{
						_this.className="error"
					}
				}
			}
			// 2.密码:由6-18位字符组成
			if(_this.id==="password"){
				_this.onkeyup = function(){
					var passwordReg=/^.{6,18}$/
					password = _this.value
					if(passwordReg.test(_this.value)){
						_this.className="pass"
					}else{
						_this.className="error"
					}
				}
			}
			// 3.邮箱:一段数字或字母包含下划线@一段数字或字母.字母 
			if(_this.id==="email"){
				_this.onkeyup=function(){
					var emailReg=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
					if(emailReg.test(_this.value)){
						_this.className="pass";
					}
					else{
						_this.className="error";
					}
				}
			}
			//4. 手机号:13开头的11位数字
			if(_this.id==="tel"){
				_this.onkeyup=function(){
					var telReg=/^1[0-9](\d){9}$/;
					if(telReg.test(_this.value)){
						_this.className="pass"
					}
					else{
						_this.className="error"
					}
				}
			}
			// 5.输入的验证码必须和红色框中的相同，  点击看不清可以实现验证码的切换
			// 验证码由字母  数字组成input就是value
			var renovate = $("#renovate");
			renovate.onclick = function(){
				codespan.innerHTML = code(); 
			}
			if(_this.id == "code"){
				_this.onkeyup = function(){
					if(_this.value == codespan.innerHTML){
						_this.className="pass";
					}else{
						_this.className="error";
					}
				}
				
			}
			//6. 提交按钮
			var btn = $("#btn");
			var inputList = $("input");
			btn.onclick = function(){
				var isClassName = true;
				for(var i = 0; i < inputList.length; i++){
					if(inputList[i].className != "pass"){
						isClassName = false;
						break;
					}
				}
				if(isClassName){
					console.log(1)
					ajax2013useobjandpromise({
						method:"post",
						url:"03-reg.php",
						params:`nam=${nam.value}&password=${password.value}&email={email.value}&tel={tel.value}`,
					}).then(function(data){
						console.log(data)
						if(data=="1"){
							msg.innerHTML="注册成功hou"
							console.log(msg.innerHTML)
						}else{
							msg.innerHTML="注册失败hou"
						}
					})
				}else{
					alert("请重新填写")
				}
			}
		}
		nam.onblur = function(){
			ajax2013useobjandpromise({
				method:"post",
				url:"test.php",
				params:`nam=${nam.value}`,
			}).then(function(data){
				if(data==0){
					userMsg.innerHTML="亲亲，可以使用"
				}else{
					userMsg.innerHTML="不可以使用"
				}
			})
		}
	</script>
</html>
